<template>
    <div class="box-left-3">
        <el-table :data="tableData" style="width: 100%" max-height="300">
            <el-table-column prop="name" label="名称" width="120" />
            <el-table-column prop="state" label="主题页id" width="140" />
            <el-table-column prop="type" label="类型" width="140" />
            <el-table-column prop="number" label="商品数" width="140" />
            <el-table-column prop="sum" label="总订单数" width="140" />
            <el-table-column prop="GMV" label="今日GMV" width="140" />
            <el-table-column prop="status" label="状态" width="150" />
            <el-table-column label="操作" width="150">
                <template #default="scope">
                    <el-button link type="primary" size="small">
                        <el-icon>
                            <Edit />
                        </el-icon>
                    </el-button>
                    <el-button link type="primary" size="small" @click.prevent="deleteRow(scope.$index)">
                        <el-icon>
                            <Delete />
                        </el-icon>
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- <el-button class="mt-4" style="width: 100%" @click="onAddItem">Add Item</el-button> -->
    </div>

</template>

<script setup lang="ts">
import { ref } from 'vue'
const now = new Date()

const tableData = ref([
    {
        name: '限时秒杀',
        state: '1id',
        type: '内部链接',
        number: '44',
        sum: '404',
        GMV: '4542',
        status: "已下线",
    },
    {
        name: '限时秒杀',
        state: '2id',
        type: '外部链接',
        number: '41',
        sum: '127',
        GMV: '9842',
        status: "已上线",
    },
    {
        name: '限时秒杀',
        state: '4id',
        type: '外部链接',
        number: '41',
        sum: '127',
        GMV: '9842',
        status: "已上线",
    }, {
        name: '限时秒杀',
        state: '5id',
        type: '外部链接',
        number: '41',
        sum: '127',
        GMV: '9842',
        status: "已上线",
    },
    {
        name: '限时秒杀',
        state: '7id',
        type: '外部链接',
        number: '41',
        sum: '127',
        GMV: '9842',
        status: "已上线",
    }
])

const deleteRow = (index: number) => {
    tableData.value.splice(index, 1)
}

const onAddItem = () => {
    now.setDate(now.getDate() + 1)
    tableData.value.push({
        name: '限时秒杀',
        state: '9id',
        type: '内部链接',
        number: '34',
        sum: '234',
        GMV: '6426',
        status: "已下线",
    })
}
</script>

<style lang="scss" scoped>
.box-left-3 {
    width: 100%;
    height: 300px;
    margin-top: 30px;
}
</style>